<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢乐豆记录</title>
		<script src="js/jquery-1.9.1.min.js"></script>
		
		<!-- 引入jquery-ui插件 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
		<script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
		
		<script>
		   //页面加载时触发
		   $(function(){
			   //查询订单记录的接口
			   queryOrderList();
		   });
		   
		   //查询充值订单列表
		   function queryOrderList(){
			   //获取当前登录用户的id
			   var uid=localStorage.getItem("uid");
			   $.ajax({
				   type:"GET",
				   url:"http://localhost:8080/order/list",
				   data:{
					   uid:uid
				   },
				   success:function(data){
					   console.log(data);
					   
					   for(var i=0;i<data.length;i++){
						   var item=data[i];
						   var html="<tr><td>"+item.orderId +"</td><td>"
						   +item.money+"</td><td>"
						   +item.beanNumber+"</td><td>"
						   +item.createTime+"</td><td>"
						   +(item.status==1?"已支付":"<button onclick=\"goPay('"+item.orderId+"')\">去支付</button>")+"</td></tr>";
						   
						   $("#mytbody").append(html);
					   }
				   }
			   });
		   }
		   
		   /**
		    * 去支付
		    */
		   var orderId = null;
		   function goPay(orderid){
		   	orderId = orderid;
		   	//alert("去支付！" + orderid);
		   	
		   	//弹出一个支付成功的弹出框，让用户支付完成后点击
		   	$("#paydialog").dialog({
		   		title: "支付中",
		   		width: 400,
		   		height: 300
		   	});
		   	
		   	//打开一个新页签，进行支付宝支付
		   	window.open("http://localhost:8080/order/pay?orderid=" + orderid);
		   }
		   
		   /**
		    * 支付结果的查询
		    */
		   function payQuery(){
		   	// alert("查询支付结果的订单：" + orderId);
		   	
		   	//发送请求给后端，进行订单交易的查询
		   	$.ajax({
		   		type: "GET",
		   		url: "http://localhost:8080/pay/query",
		   		data: {
		   			orderid: orderId
		   		},
		   		success: function(data){
		   			//data > 0  支付成功  最新的欢乐豆数量
		   			//data -1 支付还未成功
		   			if(data > 0){
		   				//支付成功
		   				$("#paydialog").dialog("close");
		   				//更新浏览器保存的欢乐豆数量
		   				localStorage.setItem("happyBean", data);
		   			} else {
		   				//支付还未成功
		   				alert("交易未完成！");
		   			}
		   		}
		   	});
		   	
		   }
		</script>
		<style>
		    .body_class {
		    	display: flex;
		    	flex-direction: column;
		    	align-items: center;
		    }
		    
		    .table_class {
		    	width: 100%;
		    	text-align: center;
		    }
		    
		    .table_class td{
		    	padding: 20px;
		    	border: 1px solid white;
		    }
		    
		    .table_class thead tr {
		    	background-color: aquamarine;
		    }
		    
		    .table_class tbody tr:nth-child(even) {
		    	background-color: #FFFFFF;
		    }
		    
		    .table_class tbody tr:nth-child(odd) {
		    	background-color: gainsboro;
		    }
			
		</style>
	</head>
	<body class="body_class">
		<h1>充值订单列表</h1>
		
		<table class="table_class">
			<thead>
				<tr>
					<td>订单号</td> 
					<td>充值金额</td>
					<td>欢乐豆数量</td>
					<td>下单时间</td>
					<td>订单状态</td>
				</tr>
			</thead>
			<tbody id="mytbody">
				
			</tbody>
		</table>
		
		<!-- 支付进行中...弹出框 -->
		<div id="paydialog" style="display: none;">
			<div style="width: 100%; height: 100%; 
				display: flex; 
				flex-direction: column; 
				align-items: center;
				justify-content: center;">
				<span>正在支付.....</span>
				<button onclick="payQuery()" style="margin-top: 40px;">支付已完成</button>
			</div>
		</div>
	</body>
</html>
